<template>
  <div class="report-page">
    <!-- 报修项目列表 -->
    <van-cell-group>
      <van-cell
          v-for="item in reportItems"
          :key="item.id"
          :title="item.title"
          is-link
          @click="handleClick(item.path)"
      >
        <template #icon>
          <van-icon
              :name="item.icon"
              :color="item.color"
              size="24"
              class="cell-icon"
          />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reportItems: [
        {
          id: 1,
          title: '运维报修',
          icon: 'setting-o',
          color: '#1989fa',
          path: '/workorderbaoxiu'
        },
        {
          id: 2,
          title: '保洁报单',
          icon: 'brush-o',
          color: '#1989fa',
          path: '/Workorderbd'
        },
        {
          id: 3,
          title: '运送申请',
          icon: 'logistics',
          color: '#1989fa',
          path: '/transport-request'
        }
      ]
    }
  },
  methods: {
    handleClick(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style scoped>
.report-page {
  background-color: #f7f8fa;
  min-height: 100vh;
}

.cell-icon {
  margin-right: 8px;
  vertical-align: middle;
}

:deep(.van-cell) {
  align-items: center;
  padding: 20px 16px;
}
</style>